<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="我的收益" placeholder bgColor="#fff"></u-navbar>
    <view class="revenue-info" :style="'background-image: url('+revenue+');'">
      <view class="u-text-center u-font-24 u-m-b-6">可提现金额(元)</view>
      <view class="u-text-center u-font-40 u-m-b-24" style="font-weight: 500;color: #E20300;">¥ {{ (incomeCountInfo.balance / 100).toFixed(2) || 0 }}</view>
      <view class="btn" @click="realName">申请提现</view>
      <view class="u-flex">
        <view class="u-flex-1 u-text-center">
          <view class="u-font-24">今日收益</view>
          <view class="u-font-28">¥ {{ (incomeCountInfo.thisDay / 100).toFixed(2) || 0 }}</view>
        </view>
        <u-line length="40rpx" color="#2979ff" direction="col"></u-line>
        <view class="u-flex-1 u-text-center">
          <view class="u-font-24">累计收益</view>
          <view class="u-font-28">¥ {{ (incomeCountInfo.allMonth / 100).toFixed(2) || 0 }}</view>
        </view>
      </view>
    </view>
    <view class="type-list">
      <u-tabs
        :list="typeList"
        lineColor="#00C02F"
        lineWidth="64rpx"
        inactiveStyle="color: #313131;"
        activeStyle="color: #00C02F;"
        :current="tabsCurrent"
        @change="tabsChange"
        :scrollable="false"
      >
      </u-tabs>
    </view>
    <view v-if="tabsCurrent == 0" class="list">
      <view class="item" v-for="item in list1" :key="item.id">
        <view class="u-flex u-row-between u-m-b-16">
          <view class="u-font-28" style="color: #000;font-weight: 500;">{{ item.remark }}</view>
          <view class="u-font-28" style="color: #49AF00;font-weight: 500;" v-if="item.transactionType == '3' || item.transactionType == '5'">- {{ +item.expenseAmount.toFixed(2) }}</view>
          <view class="u-font-28" style="color: #E20300;font-weight: 500;" v-else>+ {{ +item.incomeAmount.toFixed(2) }}</view>
        </view>
        <view class="u-flex u-row-between u-m-b-16">
          <view class="u-font-24" style="color: #000;">{{ item.createTime }}</view>
          <view v-if="item.transactionType != '3' && item.transactionType != '5'" class="u-font-28" style="color: #818181;" @click="getDetail(item)">查看明细>></view>
        </view>
      </view>
      <a-empty v-if="list1.length == 0"></a-empty>
    </view>
    <view v-if="tabsCurrent == 1" class="list">
      <view class="item" v-for="item in list2" :key="item.id">
        <view class="u-flex u-row-between u-m-b-16">
          <view class="u-font-28" style="color: #000;font-weight: 500;">{{ item.remark }}</view>
          <view class="u-font-28" style="color: #49AF00;font-weight: 500;" v-if="item.transactionType == '3' || item.transactionType == '5'">- {{ +item.expenseAmount.toFixed(2) }}</view>
          <view class="u-font-28" style="color: #E20300;font-weight: 500;" v-else>+ {{ +item.incomeAmount.toFixed(2) }}</view>
        </view>
        <view class="u-flex u-row-between u-m-b-16">
          <view class="u-font-24" style="color: #000;">{{ item.createTime }}</view>
          <view class="u-font-28" style="color: #818181;">余额：{{ item.balanceAfter }}</view>
        </view>
      </view>
      <a-empty v-if="list2.length == 0"></a-empty>
    </view>
    <u-popup :show="showDetail" :round="20" mode="center" @close="showDetail=false">
      <view class="detail-popup customize-popup">
        <view class="popup-header">收益：¥ {{ form.incomeAmount }}</view>
        <view class="popup-content">
          <view class="u-m-b-20 u-font-28">订单编号：{{ form.orderNo }}</view>
          <view class="u-m-b-20 u-font-28" v-if="form.transactionType == 1">商品信息：{{ form.productName }}</view>
          <view class="u-m-b-20 u-font-28" v-if="form.transactionType == 1">商品数量：{{ form.productNum }}</view>
          <view class="u-m-b-20 u-font-28" v-if="form.transactionType == 1">订单金额：¥ {{ form.totalAmountCents ? (+form.totalAmountCents / 100).toFixed(2) : 0 }}</view>
          <view class="u-m-b-20 u-font-28" v-if="form.transactionType == 1">交易时间：{{ form.transactionTime }}</view>
          <view class="u-font-28" style="margin-bottom: 66rpx;" v-if="form.transactionType == 1">下单用户：{{ form.userName }}</view>
          <view class="u-m-b-20 u-font-28" style="margin-bottom: 66rpx;" v-if="form.transactionType == 2">收益来源：{{ form.remark }}</view>
          <view class="u-text-center">
            <text class="u-font-28" style="color: #56CB03;" @click="showDetail=false">关闭</text>
          </view>
        </view>
      </view>
		</u-popup>
  </view>
</template>

<script>
import revenue from '../../static/my/revenue.png'
import { incomeCount, getTransactionList, getTransactionDetail } from '@/api/index'

export default {
  data() {
    return {
      revenue,
      nickName: '',
      typeList: [
        {
          name: '收益明细',
        },
        {
          name: '提现明细',
        },
      ],
      showDetail: false,
      tabsCurrent: 0,
      goodsNum1: 1,
      goodsNum2: 1,
      pages1: 1,
      pages2: 1,
      list1: [],
      list2: [],
      userInfo: {},
      incomeCountInfo: {
        balance: 0,
        thisDay: 0,
        allMonth: 0,
      },
      form: {},
    };
  },
  onLoad(options) {
    if(options.tabsCurrent) {
      this.tabsCurrent = +options.tabsCurrent
    }
    this.userInfo = uni.getStorageSync('userInfo')
    this.getIncomeCount()
    this.getPage()
  },
  methods: {
    getDetail(item) {
      uni.showLoading({ mask: true })
      getTransactionDetail({id: item.id}).then(res => {
        uni.hideLoading()
        this.form = res.data
        this.showDetail = true
      })
    },
    getPage(type) {
      uni.showLoading({ mask: true })
      if(type === 0) {
        getTransactionList({ queryType: '1', pageSize: 20, pageNum: this.goodsNum1, partnerId: this.userInfo.userId }).then(res => {
          uni.hideLoading()
          this.list1 = [...this.list1, ...res.rows]
          this.pages1 = Math.ceil(res.total / 20)
        })
      } else if(type === 1) {
        getTransactionList({ queryType: '2', pageSize: 20, pageNum: this.goodsNum2, partnerId: this.userInfo.userId }).then(res => {
          uni.hideLoading()
          this.list2 = [...this.list2, ...res.rows]
          this.pages2 = Math.ceil(res.total / 20)
        })
      } else {
        getTransactionList({ queryType: '1', pageSize: 20, pageNum: this.goodsNum1, partnerId: this.userInfo.userId }).then(res => {
          uni.hideLoading()
          this.list1 = [...this.list1, ...res.rows]
          this.pages1 = Math.ceil(res.total / 20)
        })
        getTransactionList({ queryType: '2', pageSize: 20, pageNum: this.goodsNum2, partnerId: this.userInfo.userId }).then(res => {
          uni.hideLoading()
          this.list2 = [...this.list2, ...res.rows]
          this.pages2 = Math.ceil(res.total / 20)
        })
      }
    },
    tabsChange(e) {
      this.tabsCurrent = e.index
    },
    getIncomeCount() {
      uni.showLoading({ mask: true })
      incomeCount({ userId: this.userInfo.userId }).then(res => {
        uni.hideLoading()
        this.incomeCountInfo = res.data
      })
    },
    realName() {
      const that = this
      if(!this.userInfo.phonenumber) {
        uni.showToast({
          icon: 'none',
          title: `请先绑定手机号`
        })
        setTimeout(() => {
          that.jumpTo('/pages/userInfo/userPhone')
        }, 1000)
        return
      }
      if(this.userInfo.verifiedStatus == '1') {
        this.jumpTo('/pages/my/withdraw')
      } else {
        this.jumpTo('/pages/my/realName')
      }
    },
  },
  onReachBottom() {
    if(this.tabsCurrent === 0) {
      if(this.goodsNum1 < this.pages1) {
        this.goodsNum1++
        this.getPage(this.tabsCurrent)
      }
    } else {
      if(this.goodsNum2 < this.pages2) {
        this.goodsNum2++
        this.getPage(this.tabsCurrent)
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .revenue-info {
    width: 750rpx;
    height: 356rpx;
    background-repeat: no-repeat;
    background-size: 750rpx 356rpx;
    padding: 48rpx 0 0;
    .btn {
      width: 180rpx;
      height: 52rpx;
      line-height: 52rpx;
      text-align: center;
      border-radius: 200rpx;
      border: 2rpx solid #000000;
      font-size: 24rpx;
      color: #000000;
      margin: 0 auto;
      margin-bottom: 24rpx;
    }
  }
  .type-list {
    width: 100%;
    height: 100rpx;
    background: #FFFFFF;
    margin: 0 auto 12rpx;
  }
  .list {
    width: 702rpx;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12rpx;
    .item {
      width: 100%;
      background: #FFFFFF;
      border-radius: 12rpx;
      padding: 30rpx 32rpx;
    }
  }
}
.detail-popup {
  width: 632rpx;
  background-color: #fff;
  border-radius: 20rpx;
  .popup-header {
    width: 632rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
    background: #56CB03;
    border-radius: 20rpx 20rpx 0rpx 0rpx;
    font-weight: 500;
    font-size: 32rpx;
    color: #FFFFFF;
  }
  .popup-content {
    padding: 36rpx 38rpx;
    background-color: #FFFFFF;
    border-radius: 0rpx 0rpx 20rpx 20rpx;
  }
}
</style>
